<template>
  <div :key="id" style="height: 42px; line-height: 42px">
    <ButtonGroup :title="`${configKey === 'titleColor' ? '标题' : '描述'}颜色`" :status="status">
      <span :style="{ marginRight: isFollow ? '42px' : '10px' }">
        <!-- <input type="checkbox" v-model="isFollow" @change="handleSelect" />
        <label>跟随系统</label> -->
        <el-checkbox v-model="isFollow" @change="handleSelect">跟随系统</el-checkbox>
      </span>
      <el-color-picker v-if="!isFollow" v-model="text" @update:modelValue="handleInput" />
    </ButtonGroup>
  </div>
</template>

<script setup lang="ts">
import type { UpdateStatus, VueComType } from '@/types';
import { inject, onMounted, ref } from 'vue';
import ButtonGroup from './ButtonGroup/index.vue';

// 定义 props
const props = defineProps<{
  status: string;
  isShow: boolean;
  configKey: string;
  editCom: VueComType;
  id: string;
}>();

// 注入 updateStatus
const updateStatus = inject<UpdateStatus>('updateStatus');

// 定义响应式变量
const text = ref(props.status);
const isFollow = ref(false);
let colorBuffer = '';

onMounted(() => {
  isFollow.value = !props.status;
});

// 监听输入事件并更新状态
function handleInput(newVal: string) {
  if (updateStatus && newVal) {
    text.value = newVal; // 更新绑定的值
    updateStatus(props.configKey, newVal);
  }
}
function handleSelect() {
  if (props.status) colorBuffer = props.status;
  if (isFollow.value) {
    text.value = '';
  } else {
    text.value = colorBuffer ? colorBuffer : '#303133'; // 没有缓存颜色则赋值为黑色
  }
  if (updateStatus) updateStatus(props.configKey, text.value);
}
</script>
